<template>
  <!-- 企业创新主页-->
  <div class="innovationPc">
    <img class="banner" :src="banner?.[0]?.webimages" />
    <img class="banner-m" :src="banner?.[0]?.mobileimages" />
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return { banner: [] };
  },


  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const result = await this.$request.get("khcommon/banner", {
          params: {
            navId: 1,
          }
        });
        this.banner = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }

    },
  },
};
</script>
<style lang="scss" >
.innovationPc {
  @include fn.fluidContainer;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media screen and (min-width: 1200px) {
    .banner-m {
      display: none;
    }

    .banner {
      @include fn.fluidContainer;
      height: 375px;
      object-fit: cover;
    }
  }
    @media screen and (max-width: 1200px) {
    .banner {
      display: none;
    }

    .banner-m {
      width: 100%;
      height: fn.rpx(660);
      object-fit: cover;
    }
  }


}
</style>